<script setup>
defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

function handleClick(link) {
  navigateTo(link)
}
</script>

<template>
  <div>
    <ul class="nav-warp">
      <li v-for="item in list" :key="item.name" :style="{ background: item.bgColor }" class="nav-item" @click="handleClick(item.link)">
        <div class="img">
          <img class="w-20px h-20px ml-16px" :src="`/images/icon/nav/${item.icon}.png`" :alt="item.name" />
        </div>
        <div class="ml-10px">
          <div class="font-bold mb-5px">{{ item.name }}</div>
          <div class="text-font-12px text-hex-777">{{ item.text }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.nav-warp {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  .nav-item {
    width: 235px;
    height: 60px;
    display: flex;
    margin: 0 5px 20px 0;
    align-items: center;
    border-radius: 8px;
    color: #111111;
    line-height: normal;
    cursor: pointer;
    &:hover {
      background: #f0f5ff;
      transition: 0.3s;
    }
    &:nth-child(5n) {
      margin: 0 0 20px 0;
    }
    img {
      position: relative;
      top: -6px;
    }
  }
}
</style>
